import React from 'react'
import Helmet from 'react-helmet'
import { Link, withPrefix } from 'gatsby-link'
import '../assets/sass/main.scss'
import NavHeader from '../components/NavHeader'
import Nav from '../components/Nav'
import Header from '../components/Header'
import Menu from '../components/Menu'
import Footer from '../components/Footer'
import Sidebar from '../components/Sidebar';
import MobileNavigation from '../components/MobileNavigation';
import NavPanel from '../components/NavPanel';
class Template extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isMenuVisible: false,
            isSideBarMenuVisible: false,
            loading: 'is-loading',
            navSize: -1,
        }
        this.handleToggleSideBarMenu = this.handleToggleSideBarMenu.bind(this)
        this.handleToggleMenu = this.handleToggleMenu.bind(this)
        this.scrollHandler = this.onHandleScroll.bind(this);
        this.windowResizeHandler = this.onWindowResizeHandler.bind(this);
    }
    onHandleScroll(event) {
        const obj = this.initNav();
        if (event.pageY - obj.offsetTop < this.state.navSize && obj.offsetTop == 0) {
            obj.className = '';
        } else if (event.pageY - obj.offsetTop >= 0) {
            obj.className = 'alt';
        }
    }
    onWindowResizeHandler(event) {
        this.initNav();
    }
    initNav() {
        const obj = document.getElementById('nav');
        obj.className = '';
        this.setState({
            navSize: -1
        })
        return obj;
    }
    componentDidMount() {
        this.timeoutId = setTimeout(() => {
            this.setState({ loading: '' });
        }, 100);
        window.addEventListener('scroll', this.scrollHandler);
        window.addEventListener('resize', this.windowResizeHandler)
    }

    componentWillUnmount() {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }
        this.initNav();
        window.removeEventListener('resize', this.windowResizeHandler)
        window.removeEventListener('scroll', this.scrollHandler);
    }

    handleToggleMenu() {
        this.setState({
            isMenuVisible: !this.state.isMenuVisible
        })
    }
    handleToggleSideBarMenu() {
        this.setState({
            isSideBarMenuVisible: !this.state.isSideBarMenuVisible
        })
    }
    handleToggleNav(e) {
        e.target.className = 'active';
    }
    render() {
        const { children } = this.props

        return (
            <div className={`body ${this.state.loading} ${this.state.isMenuVisible ? 'is-menu-visible' : ''}`}>
                <Helmet>
                    <link rel="stylesheet" href={withPrefix('skel.css')} />
                </Helmet>
                <div id="wrapper">
                    <div id="wrapper-main">
                        <NavHeader onToggleMenu={this.handleToggleMenu} />
                        <Header onToggleMenu={this.handleToggleSideBarMenu} SideBarMenu={this.state.isSideBarMenuVisible ? 'inactive' : ''}/>
                        <Nav id="nav" />
                        {children()}
                        <Footer />
                    </div>
                    <Sidebar onToggleMenu={this.handleToggleSideBarMenu} SideBarMenu={this.state.isSideBarMenuVisible ? '' : 'inactive'} />
                </div>
                <Menu onToggleMenu={this.handleToggleMenu} />
                <MobileNavigation />
            </div>
        )
    }
}

Template.propTypes = {
    children: React.PropTypes.func
}

export default Template
